<template>
    <div class="w100 h100 app df fd-c jc-sb">
        <dv-border-box-8 class="top w100 h100">
            <ul class="uu df fd-c w100 h100">
                <li v-for="(item, index) in list" :key="index" class="df jc-sb f1">
                    <span>{{ item.name }}</span>
                    <span>{{ item.time }}</span>
                </li>
            </ul>
        </dv-border-box-8>

        <dv-border-box-8 class="bottom">
            <div id="main-cahrts" class="w100 h100"></div>




        </dv-border-box-8>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [{
                name: "xxxxxx部门排查出患者11个",
                time: "2022-01-01"
            }, {
                name: "xxxxxx部门排查出患者11个",
                time: "2022-01-01"
            }, {
                name: "xxxxxx部门排查出患者11个",
                time: "2022-01-01"
            }, {
                name: "xxxxxx部门排查出患者11个",
                time: "2022-01-01"
            }],
            options: {}
        }
    },

    mounted() {
        var chartDom = document.getElementById('main-cahrts');
        var myChart = this.$echarts.init(chartDom);

        this.option = {
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     top: '5%',
            //     left: 'center'
            // },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 22, name: '1 Engine' },
                        { value: 44, name: '2 Engine' },
                        { value: 666, name: '5 Engine' },
                    ]
                }
            ]
        };

        myChart.setOption(this.option);

    },

}
</script>

<style lang="scss" scoped>
.app {
    flex: 1;

    // height: 569px;
    // background-color: #fff;
    .uu {
        padding: 10px 15px;
        color: #fff;
    }

    .top {
        height: 30%;
    }

    .bottom {
        width: 100%;
        height: 68%;
    }
}
</style>